<template>
  <el-row class="my-el-row">

    <el-col :span="4">
      <el-dropdown class="my_el_avatar">
        <el-avatar   :size="45" :src="userStore.avatar" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-if="userStore.id === '' || userStore.id === null" @click="clickAvatar()">登录</el-dropdown-item>
            <el-dropdown-item v-else @click="loginOut()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>


    <el-col :span="16">
      <el-tabs v-model="activeName" class="el-tabs" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in navList" :key="index" :label="item.label" :name="item.name"/>
      </el-tabs>
    </el-col>

    <el-col :span="4">
      <Serch/>
    </el-col>
  </el-row>

</template>
<script setup >
import {reactive, ref} from 'vue'
import Serch from "@/components/serch/Serch.vue";
import {useRouter} from "vue-router";
import useUserStore from "@/stores/user.js";
import {ElMessage} from "element-plus";
const userStore = useUserStore()
const router =useRouter();
const activeName = ref('User1')
const navList = reactive([
  {label:'首页',name:'User',},
/*  {label:'访客',name:'Config'},
  {label:'友情链接',name:'Role'},
  {label:'查看',name:'Task'},
  {label:'内容',name:'Luo'},*/
])
function loginOut (){
  ElMessage.success("退出成功")
  userStore.logOut()
  router.push({
    name:'login'
  })
}
function getUser(){
  userStore.getInfo()
}

function handleClick() {
  router.push({
    name:'centre'
  })
}
//点击头像登录
function clickAvatar(){
  router.push({
    name:'login'
  })
}
getUser()

</script>

<style scoped>


:deep(.el-tabs__nav-scroll) {
  overflow: hidden;
  display: flex;
  justify-content: center;
}




:deep(.el-tabs__header) {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 0;
  padding: 0;
  position: relative;
}
.el-tabs {
  --el-tabs-header-height: 60px;
  display: flex;
}
.my-el-row{
  background-color: #f8f6f6;
  height: 60px;
  margin-bottom: 10px;
}
:deep(.el-tabs__item){
  color: transparent;
  background-clip: text;
  font-size:25px;
  font-family: 华文新魏,system-ui;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
  padding-top: 3%;
}

.my_el_avatar{
  margin-left: 35%;
  margin-top: 3%;
  cursor: pointer;
}
</style>